<template>
	<!-- 添加或修改配置对话框 -->
	<el-card class="card-body" style="overflow-y: auto;">
		<el-row :gutter="20" class="row-style">
			<el-col :span="24" class="left-layout">
				<el-form ref="managerRef" :model="form" :rules="rules" label-width="120px">
					<el-row>
						<el-col :span="24">
							<el-form-item label="主键" prop="id" v-if="false">
								<el-input v-model="form.id" :disabled="isType =='details'" placeholder="请输入主键" />
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="模板名称" prop="templateName" v-if="true">
								<el-input v-model="form.templateName" :disabled="isType =='details'"  placeholder="请输入模板名称" />
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="模板类型" prop="templateType" v-if="true">
								<el-select v-model="form.templateType" :disabled="isType =='details'"  placeholder="模板类型" clearable>
									<el-option label="ftl" value="1" />
									<el-option label="html" value="2" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="模板路径" prop="templatePath" v-if="true">
								<el-input v-model="form.templatePath" :disabled="isType =='details'"  placeholder="请输入模板路径" />
							</el-form-item>
						</el-col>

						<el-col :span="24">
							<el-form-item label="生成文件名称" prop="fileName" v-if="true">
								<el-input v-model="form.fileName" :disabled="isType =='details'"  placeholder="请输入生成文件名称" />
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="对应表单" prop="formId" v-if="true">
								<el-input v-model="form.formId" :disabled="isType =='details'"  placeholder="请输入对应表单" />
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="创建人" prop="createBy" v-if="false">
								<el-input v-model="form.createBy" :disabled="isType =='details'"  placeholder="请输入创建人" />
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="创建时间" prop="createTime" v-if="false">
								<el-input v-model="form.createTime" placeholder="请输入创建时间" />
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="修改人" prop="updateBy" v-if="false">
								<el-input v-model="form.updateBy" placeholder="请输入修改人" />
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="修改时间" prop="updateTime" v-if="false">
								<el-input v-model="form.updateTime" placeholder="请输入修改时间" />
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="模板文件" prop="templateText">
								<Editor style="width:90%" :disabled="isType =='details'"  :value="form.templateText" @input="changeTemplateText" />
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<div class="dialog-footer">
					<el-button @click="cancel">取 消</el-button>
					<el-button type="primary" @click="submitForm" v-if="isType !='details'">确 定</el-button>
				</div>
			</el-col>
		</el-row>
	</el-card>
</template>

<script>
	//API接口
	import api from '@/api'
	//上传组件
	import Upload from '@/components/FileUpload/index.vue'
	//富文本组件
	import Editor from '@/components/Editor/index.vue'

	export default {
		components: {
			Upload,
			Editor
		},
		props: {
			save: {
				type: Function,
				default: (e, obj) => {
					console.log('asdasd',obj)
					if(obj.$parent.name){
					    obj.$mitt.emit('changetype', {
					        type:1,
					    })
					}else{
						obj.$router.go(-1);
					}
				}
			},
			formList: {
				type: Object,
				default () {
					return {}
				},
			},
		},
		data() {
			return {
				isType: '',
				//表单验证
				form: {},
				isShow: true,
				rules: {
					templateName: [{
						required: true,
						message: '模板名称不能为空',
						trigger: 'blur'
					}],
					fileName: [{
						required: true,
						message: '生成文件名称不能为空',
						trigger: 'blur'
					}],
					formId: [{
						required: true,
						message: '对应表单不能为空',
						trigger: 'blur'
					}],
				},
			}
		},
		/**
		 * 挂载函数
		 */
		mounted() {
			//根据状态判断是否请求详情接口
			this.isType = this.formList.type ? this.formList.type : this.$route.query.isType;
			if (this.isType === "edit" || this.isType === "details") {
				//编辑以及详情通过路由跳转传参
				let editid = this.formList.id ? this.formList.id : this.$route.query.id;
				//如果事项请页面隐藏提交按钮
				if (this.$route.query.type) {
					this.isShow = false;
				}
				if (this.formList.instanceId) {
					// 组件时的判断instanceId请求详情接口表单回显数据
					api.sysTemplate.list({
						instanceId: this.formList.instanceId
					}).then(res => {
						let data = res.rows.length ? res.rows[0] : {}
						this.form = data;
					});
				} else {
					// 跳转链接时请求详情接口表单回显数据
					api.sysTemplate.editId(editid).then(res => {
						if (res.data) {
							this.form = res.data;
						}
					});
				}
			}

		},
		methods: {
			changeTemplateText(value) {
				this.form.templateText = value
			},
			/** 提交按钮 */
			submitForm() {
				this.$refs['managerRef'].validate(valid => {
					Object.keys(this.formList).map((key) => {
						if (this.isType) {
							if (key != 'id') {
								this.form[key] = this.formList[key]
							}
						} else {
							this.form[key] = this.formList[key]
						}
					})
					if (valid) {
						if (this.isType && this.form.id) {
							api.sysTemplate
								.edit(this.form)
								.then(res => {
									this.save(res, this);this.form.id = res.data?res.data:null;
									this.$message.success(res.msg)
								})
								.catch(err => {
									this.$message.error(err.msg)
								})
						} else {
							api.sysTemplate
								.add(this.form)
								.then(res => {
									this.save(res, this);this.form.id = res.data?res.data:null;
									this.$message.success(res.msg)
								})
								.catch(err => {
									this.$message.error(err.msg)
								})
						}
					}
				})
			},
			/** 更新流程实例、流程状态 */
			/** 取消按钮 */
			cancel() {
				if(this.$parent.name){
					console.log(this.$parent.name)
				    this.$mitt.emit('changetype', {
				        type:1,
				    })
				}else{
					this.$router.go(-1);
				}
			},
		},
	}
</script>

<style lang="less" scoped>
	:deep(.el-tabs__nav-scroll) {
		padding: 0 20px;
	}

	:deep(.el-tabs__content) {
		height: 560px;
		overflow-y: scroll;
	}
</style>
